<template>
  <div class="resume">
    <van-notice-bar
      mode="closeable"
      
      text="基本资料和求职意向填写完整后才会出现在简历列。"
    />
    <!-- 基本资料 -->
    <div class="baseResume">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/baseResume.png" alt="" >
        <div>基本资料 <span style="color:red">(必填)</span></div>
        </div>
        <div class="baseResume_right" @click="tobaseResume">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/revise.png" alt="">
          <div>修改</div>
        </div>
      </div>
      <div class="content" v-if="real_name">
        <img :src="photo_url">
        <div class="desc" >
          <div>{{real_name}}</div>
          <div>{{sex}} | {{age}}岁</div>
        </div>
      </div>
      <div class="list">
          <div class="list_item">
            <div><span>最高学历</span> <span>{{initData.education || ''}}</span></div>
          </div>
          <div class="list_item">
            <div><span>工作经验</span> <span>{{initData.work_experience_num}}</span></div>
          </div>
          <!-- <div class="list_item">
            <div><span>专业</span> <span>初中</span></div>
          </div> -->
          <!-- <div class="list_item">
            <div><span>现居住地</span> <span>初中</span></div>
          </div>
          <div class="list_item">
            <div><span>籍贯</span> <span>初中</span></div>
          </div> -->
          <div class="list_item">
            <div><span>手机</span> <span>{{tel}}</span></div>
          </div>
          <div class="list_item" v-show="initData.email">
            <div><span>邮箱</span> <span>{{initData.email}}</span></div>
          </div>
          <div class="list_item" v-show="initData.wx">
            <div><span>微信号码</span> <span>{{initData.wx}}</span></div>
          </div>
      </div>
    </div>
    <!-- 基本资料结尾 -->

    <!-- 求职意向 -->
    <div class="wantResume">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/want.png" alt="" >
        <div>求职意向 <span style="color:red">(必填)</span></div>
        </div>
        <div class="baseResume_right" @click="towantResume">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/revise.png" alt="">
          <div>修改</div>
        </div>
      </div>
      <div class="list">
          <div class="list_item">
            <div><span>求职状态</span> <span>{{initData.job_status || ''}}</span></div>
          </div>
          <div class="list_item">
            <div><span>工作性质</span> <span>{{initData.expected_salary_type || ''}}</span></div>
          </div>
          <div class="list_item">
            <div><span>期待薪资</span> <span v-show="initData.expected_salary">{{initData.expected_salary}}元</span></div>
          </div>
          <!-- <div class="list_item">
            <div><span>期望行业</span> <span>初中</span></div>
          </div> -->
          <div class="list_item">
            <div><span>期望职位</span> <span>{{initData.job_name}}</span></div>
          </div>
          <div class="list_item">
            <div><span>工作地区</span> <span>{{initData.province || ''}}</span></div>
          </div>
      </div>
    </div>
    <!-- 求职意向结尾 -->

    <!-- 自我描述 -->
    <div class="desResume">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/desc.png" alt="" >
        <div>自我描述</div>
        </div>
        <div class="baseResume_right" @click="todescResume">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/revise.png" alt="">
          <div>修改</div>
        </div>
      </div>
      <div class="desResume_item">
            {{initData.desc || ''}}
          </div>
    </div>
    <!-- 自我描述结束 -->

    <!-- 教育经历 -->
    <div class="eduResume">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/edu.png" alt="" >
        <div>教育经历</div>
        </div>
        <div class="baseResume_right" @click="toeduResume">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/add.png" alt="">
          <div>新增</div>
        </div>
      </div>
      <div class="list" v-show="educationData">
        <div class="list_item"
          v-for="(item,index) of educationData"
          :key="index"
          
        >
          <div class="list_item_top">
            <div class="school"><span>{{item.name}}</span> <span>{{item.education}}</span></div>
            <div class="edu_icon">
              <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/revise.png" alt="" @click.stop="toeduResume(item)">
              <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/rub.png" alt="" @click.stop="deleduResume(item)">
            </div>
          </div>
          <div class="list_item_bottom">
            <div>{{item.start_time}}&nbsp;至&nbsp;</div>
            <div>&nbsp;{{item.end_time}}&nbsp;</div>
            <div>&nbsp;|&nbsp;{{item.professional_name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教育经历结尾 -->

    <!-- 工作经历 -->
    <div class="expResume">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/exp.png" alt="" >
        <div>工作经历</div>
        </div>
        <div class="baseResume_right" @click="toexpResume">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/add.png" alt="">
          <div>新增</div>
        </div>
      </div>
      <div class="list" v-show="exprienceData">
        <div class="list_item" v-for="(item,index) of exprienceData" :key="index">
          <div class="list_item_top">
            <div class="company">{{item.name}} </div>
            <div class="edu_icon">
              <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/revise.png" alt="" @click="toexpResume(item)">
              <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/rub.png" alt="" @click="delexpResume(item)">
            </div>
          </div>
          <div class="list_item_bottom">
            <div>{{item.job_title}} |</div>
            <div>{{item.start_time}} 至</div>
            <div>{{item.end_time}}</div>
          </div>
          <div class="list_item_content">
            {{item.desc}}
          </div>
        </div>
      </div>
    </div>
    <!-- 工作经历结尾 -->

    <div class="labelResume">
      <div class="tit">
        <div class="baseResume_left">
        <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/desc.png" alt="" >
        <div>特长标签 </div>
        </div>
        <div class="baseResume_right" @click="tolabelResume">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/add.png" alt="">
          <div>新增</div>
        </div>
      </div>
      <div class="labelResume_item" v-show="initData.label">
          <div v-for="(item,index) of initData.label" :key="index">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'resume',
  data(){return{
    initData:'',//总的个人信息
    photo_url:'',
    real_name:'',
    tel:'',
    sex:'',
    age:''
  }},
  computed: {
    educationData(){
      if(this.initData.edu && this.initData.edu.length!=0){
        this.initData.edu.map((val)=>{
          val.start_time=val.start_time.split(' ')[0]
          val.end_time=val.end_time.split(' ')[0]
        })
        return this.initData.edu
      }else{
        return ''
      }
    },
    exprienceData(){
      if(this.initData.work && this.initData.work.length!=0){
        this.initData.work.map((val)=>{
          val.start_time=val.start_time.split(' ')[0]
          val.end_time=val.end_time.split(' ')[0]
        })
        return this.initData.work
      }else{
        return ''
      }
    }
  },
  methods: {
    async getUserInfo(){
      // var userToken=wx.getStorageSync('userToken')
      let res=await this.$axios('/resume/getUserResume')
      if(res.data.data instanceof Object){
        this.initData=res.data.data
      this.photo_url=res.data.data.user_info.photo_url
      this.real_name=res.data.data.user_info.realname
      this.tel=res.data.data.phone
      this.sex=this.$currency.sexTag1(res.data.data.user_info.sex)
      this.age=res.data.data.age
      }
    },
    tobaseResume(){
      this.$router.push({name:'baseResume'})
          },
    towantResume(){
      this.$router.push({name:'wantResume'})
    },
    todescResume(){
      this.$router.push({name:'descResume'})
    },
    toeduResume(item){
      if(item.id){
        const item1=JSON.stringify(item)
        this.$router.push({name:'eduResume',query:{'item':item1}})

      }else{
        this.$router.push({name:'eduResume'})
      }
      
    },
    toexpResume(item){
      if(item.id){
        const item1=JSON.stringify(item)
        this.$router.push({name:'expResume',query:{'item':item1}})
      }else{
        this.$router.push({name:'expResume'})
      }
      
    },
    tolabelResume(){
      this.$router.push({name:'labelResume'})
    },
    async deleduResume(item){//删除教育经历项
    const promise=await this.$currency.showModal('删除这项教育经历','')
    if(promise==true){
        const res=await this.$axios.post('/resume/delExperience',{
          type:'edu',
          type_id:item.id
        })
        if(res.data.level=='success'){
          this.getUserInfo()
        }
      }
    },
    async delexpResume(item){
      const promise=await this.$currency.showModal('删除这项工作经历','')
    if(promise==true){
       const res=await this.$axios.post('/resume/delExperience',{
          type:'work',
          type_id:item.id
        })
        if(res.data.level=='success'){
          this.getUserInfo()
        }
      }
    }
  },
  activated(){
    this.getUserInfo()
  }
}
</script>
<style scoped>
  .resume{
    width:100%;
    background: #eee;
  }
  .baseResume{
    background: #fff;
    
  }
  .wantResume{
    background: #fff !important;
    margin-top:20px;
    margin-bottom: 20px;
  }
  .desResume{
    background: #fff !important;
    margin-top:50px;
  }
  .eduResume,.expResume,.labelResume{
    background: #fff !important;
    margin-top:20px;
  }

  .tit{
    width:100%;
    display: flex;
    background: #fff !important;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding:20px 0;
  }
  .tit>div{
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin:0 20px;
  }
  .tit>div img{
    width: 20px;
    height: 20px;
    margin:0 10px;
  }
  .baseResume_left,.baseResume_right{
    display: flex;
    justify-content:center;
    align-items:center;
  }
  .content{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding:10px 20px;
  }

  .content img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
    object-fit: cover
    
  }
  .content desc{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .list >div{
    display: flex;
    flex-wrap: wrap;
  }
  .list_item >div{
    width: 100%;
    padding:15px 20px 15px 20px;
  }
  .list_item >div>span:nth-child(1){
    width: 80px;
    display: inline-block;
    margin-right:40px;
  }


  .desResume_item{
    display: block;
    background: #fff;
    padding:15px 50px 15px 20px;
  }
  .school{
    display: flex;
    justify-content: center;
    align-content: center
  }

  .eduResume img, .expResume img{
    width: 20px;
    height: 20px;
  }
  .list_item_content{
    padding-left:10px !important;
  }
  .list_item {
    border-bottom: 1px solid #eee;
  }
  .eduResume .list_item ,.expResume .list_item{
    flex-wrap: wrap;
    padding:5px 0;
  }
  .edu_icon,.exp_icon{
    margin-right: 20px;
  }
  .edu_icon img {
    margin:0 5px
  }
  .exp_icon img{
    margin:0 5px
  }
   .list_item_top,.list_item_bottom{
    display: flex;
    justify-content: space-between;
    padding:0 0 0 10px !important;
  }
   .list_item_bottom{
    justify-content: flex-start;
  }

  .labelResume_item{
    display: flex;
    padding:10px 0;
    justify-content: space-around;
  }
  .labelResume_item>div{
  padding:5px 10px;
  border-radius: 10px;
  margin-right:10px;
}
.labelResume_item>div:nth-child(1){
  background: #fef5da;
  color: #ea994e;
}
.labelResume_item>div:nth-child(2){
    background: #daf2fe;
    color: #30a2c8;
}
.labelResume_item>div:nth-child(3){
    background: #e4fcdc;
    color: #76af58;
}
.labelResume_item>div:nth-child(4){
    background: #ebebeb;
    color: #868686;
}
</style>
